<script setup>
import {onMounted, ref} from "vue";
import * as echarts from "echarts"
import apiBigscreen  from "@/api/bigscreen.js"

const refEcharts = ref()
const chart = ref()
const data = ref([])

onMounted(async () => {
  data.value = await apiBigscreen.getLeftTop()
  chart.value = echarts.init(refEcharts.value)
  chart.value.setOption({
    title: {
      text: "水平柱状图",
      top: "%5",
      x: "center",
      textStyle: {
        color: "#fff",
        fontSize: 20,
        textShadowBlur: 10,
        textShadowColor: "#33ffff",
      }
    },
    grid: {
      top: "10%",
      left: "3%",
      right: "3%",
      bottom: "15%",
      containLabel: true,
    },
    textStyle: {
      color: "#fff"
    },
    xAxis: {
      type: "value"
    },
    yAxis: {
      type: "category",
      data: data.value.x
    },
    series: [
      {
        data: data.value.y,
        type: "bar",
        itemStyle: {
          // 圆角
          barBorderRadius: [0, 20, 20, 0],
          // 渐变色
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#005eaa"
            },
            {
              offset: 0.5,
              color: "#339ca8"
            },
            {
              offset: 1,
              color: "#cda819"
            }
          ])
        }
      }
    ]
  })
})
</script>

<template>
  <div class="chart" ref="refEcharts"></div>
</template>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>